<script setup lang="ts">
import { useWelcome } from "./utils/hook";

defineOptions({
  name: "Welcome"
});

const { connectionState, setConfig, listDialog } = useWelcome();
</script>

<template>
  <div class="h-full text-center">
    <h1>&nbsp;</h1>
    <h1>&nbsp;</h1>
    <h1>&nbsp;</h1>
    <h1>&nbsp;</h1>
    <div class="back">
      <h1 @click="setConfig" v-if="connectionState == ''">点击连接</h1>
      <h1 @click="setConfig" v-if="connectionState == 'Connecting'">连接中</h1>
      <h1 @click="setConfig" v-if="connectionState == 'Connected'">已连接</h1>
      <h1 @click="setConfig" v-if="connectionState == 'Disconnecting'">
        断开中
      </h1>
      <h1 @click="setConfig" v-if="connectionState == 'Disconnected'">
        已断开
      </h1>
    </div>
    <div class="leading-10">
      <!-- <div v-if="connectionState == ''">
        <el-button>请选择</el-button>
      </div> -->
      <!-- <div v-if="connectionState == 'Connecting'">
        <el-button>香港</el-button>
      </div> -->
      <div>
        <el-button @click="listDialog('节点列表')">香港</el-button>
      </div>
      <!-- <div v-if="connectionState == 'Disconnecting'">
        <el-button>香港</el-button>
      </div> -->
      <!-- <div>
        <el-button @click="startVpn">香港(已断开)</el-button>
      </div> -->
      <h1>V1.0.0</h1>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.back {
  position: relative;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  cursor: pointer;
  background: rgb(138 150 160 / 8%);
  border-radius: 100px;
  transform: translate(-50%, -50%);

  &:hover {
    background: rgb(138 150 160 / 20%);
    transition: background 0.6s;
  }
}
</style>
